<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div class="legend-custom" v-if="isLegend">
      <div class="legend-list" v-for="item in legentList" :key="item.name">
        <div class="item-color" :style="{ background: `${item.color}` }"></div>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div
      class="charts-container"
      style="width: 100%; height: calc(100% - 20px)"
      ref="container"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import theme from "@/components/EChart/theme/theme.json";

export default {
  name: "SunburstCustom",
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
    resize: {
      default: () => "",
    },
    renderer: {
      type: String,
      default: () => "canvas", // canvas缩放时会模糊   svg缩放不会模糊
    },
  },
  data() {
    return {
      instance: null, // echarts实例
      isLegend: false,
      legentList: [
        {
          name: "敏感数据",
          color: "#CD4949",
        },
        {
          name: "重要数据",
          color: "#F47251",
        },
        {
          name: "核心数据",
          color: "#FFC75F",
        },
      ],
    };
  },
  components: {},
  watch: {
    option: {
      handler: function (val) {
        // console.log(val);
        this.renderECharts();
      },
      deep: true,
    },
    resize: function () {
      this.chartResize();
    },
  },
  methods: {
    initEChart() {
      // alert()
      let devicePixelRatio = window.devicePixelRatio + 1;
      this.instance = echarts.init(this.$refs.container, theme, {
        devicePixelRatio,
        renderer: this.renderer,
      });

      this.instance.on("click", (event) => {
        this.$emit("chartClick", event);
      });
    },
    renderECharts() {
      this.$nextTick(() => {
        if (this.instance) this.instance.clear();
        if (this.option) {
          this.instance.setOption(this.option);
          this.chartResize();

          this.isLegend =
            this.option &&
            this.option.series &&
            this.option.series[0].data.length;
        }
      });
    },
    chartResize() {
      this.$nextTick(() => {
        if (this.instance) this.instance.resize();
      });
    },
  },
  mounted() {
    this.initEChart();
    this.renderECharts();
    let that = this;
    window.addEventListener("resize", () => {
      that.instance.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.charts-container {
  width: 100%;
  height: 100%;
}

.legend-custom {
  width: 100%;
  position: absolute;
  left: 0;
  top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;

  .legend-list {
    margin: 0 16px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;

    .item-color {
      width: 20px;
      height: 12px;
      margin-right: 4px;
      border-radius: 3px;
    }
  }
}
</style>

<style lang="scss">
.custom-tooltip-container {
  display: flex;
  flex-direction: column;
}
.custom-tooltip-item {
  display: flex;
  align-items: center;
}

.custom-tooltip-item-content {
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}
</style>
